<template>
  <div class="hea-top"  :class="handerView?'show-hea':'hid-hea'">
    <!-- <el-affix :offset="0" index="5"> -->
      <div class="header-top" >
        <!-- <div class="top-img" @click="goHome()" @mouseenter="mouseEnterHandel" @mouseleave="mouseLeaveHandel"> -->
 
        <div class="top-img" @click="goHome()">
          <el-image v-show="isEeter" class="imgstyle" :src="logor" fit="cover" />
          <el-image v-show="!isEeter" class="imgstyle" :src="logow" fit="cover" />
        </div>
        <div class="nav-list">
          <div
            class="nav-i"
            @click="routerHandle('work')"
            :class="routerName == 'work' ? 'activeCircle' : ''"
          >
            <span class="en-font">WORK </span> <span style="padding-left: 5px;">案例</span>
          </div>
          <div
            class="nav-i"
            @click="routerHandle('about')"
            :class="routerName == 'about' ? 'activeCircle' : ''"
          >
            <span class="en-font">ABOUT </span> <span style="padding-left: 5px;">关于</span>
          </div>
          <div
            class="nav-i"
            @click="routerHandle('service')"
            :class="routerName == 'service' ? 'activeCircle' : ''"
          >
            <span class="en-font">SERVICE </span> <span style="padding-left: 5px;">服务</span>
          </div>
          <div
            class="nav-i"
            @click="routerHandle('contact')"
            :class="routerName == 'contact' ? 'activeCircle' : ''"
          >
            <span class="en-font">CONTACT </span> <span style="padding-left: 5px;">联系</span>
          </div>
        </div>
      </div>
    <!-- </el-affix> -->
  </div>
</template>
  
  <script>
import logor from "@/assets/imgs/logor.png";
import logow from "@/assets/imgs/logow.png";
export default {
  name: "headerTop",
  props: {
    // topHanderView:{
    //   type:Boolean,
    //   default:true
    // }
  },
  data() {
    return {
      handerView:true,
      logow,
      logor,
      isEeter:false,
      routerName: "home",
      lastScrollTop: 0,
    };
  },

  mounted() {
    this.routerName = this.$route.name;
    window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("resize", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("resize", this.handleScroll);
  },

  methods: {
    mouseEnterHandel(){
      this.isEeter = true
    },
    mouseLeaveHandel(){
      this.isEeter = false
    },
    goHome(){
      this.$router.push("/");
    },
    routerHandle(val) {
      this.$router.push("/" + val);
    },
    handleScroll(e) {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > this.lastScrollTop) {
        // 下拉操作
        // console.log("Scrolling Down");
        if(scrollTop>60){
          this.handerView = false
        } else {
          this.handerView = true
        }

      } else {
        // 上拉操作
        // console.log("Scrolling Up");
        this.handerView = true
      }
      this.lastScrollTop = scrollTop;

    },
  },
};
</script>
  <style scoped lang="scss">
.hea-top {
  width: 100%;
  position: fixed;
  z-index: 10;
  color: #ffffff;
  font-family: "BebasFont";
  font-size: 15px;
  mix-blend-mode: difference;
}
.header-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  align-items: center;
  padding: 0 50px;
  // background-color: #000;
}
.nav-list {
  height: 80px;
  display: flex;
  align-items: center;
  // grid-template-columns:repeat(4,1fr) ;
  // grid-gap: 20px;
}
.nav-i {
  cursor: pointer;
  text-align: right;
  padding-left: 30px;
  margin-left: 20px;
  font-size: 20px;
  height: 20px;
  // background-color: blue;
  display: flex;
  align-items: center;
}
// .nav-i:hover {
//   color: #000000;
// }
.top-img {
  cursor: pointer;
  height: 100px;
  display: flex;
  align-items: center;
}
.imgstyle {
  width: 200px;
  filter: mix-blend-mode(multiply);
}
.activeCircle {
  position: relative;
  height: 20px;
  color: #ffffff;
}
.activeCircle::before {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border-radius: 50%;
}
.en-font{
  font-family: "BebasFontEn";
}
.show-hea{
  animation-name: show;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes show {
  from {
    top: -80px;
  }
  to {
    top: 0;
  }
}
.hid-hea{
  animation-name: hid;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes hid {
  from {
    top: 0;
  }
  to {
    top: -80px;
  }
}
</style>